/* =========================================
   Slide 03: Rune AI 三大产品矩阵 (slide-03-genesis.css)
   风格：产品介绍级页面，左中右三产品布局，中间主平台强化
   ========================================= */

#slide-3 {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 76px 92px 58px;
    color: #1A1D27;
    background:
        radial-gradient(circle at 12% 12%, rgba(30, 96, 248, 0.1) 0%, rgba(30, 96, 248, 0) 26%),
        radial-gradient(circle at 88% 16%, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0) 28%),
        linear-gradient(180deg, #FCFEFF 0%, #F4F7FC 56%, #ECF2F8 100%);
}

.slide-03-bg-grid,
.slide-03-bg-glow,
.slide-03-bg-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.slide-03-bg-grid {
    background-image:
        linear-gradient(rgba(30, 96, 248, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 96, 248, 0.03) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.96) 34%, rgba(0, 0, 0, 0.28) 74%, transparent 100%);
    opacity: 0.85;
    animation: slide-03-grid-drift 30s linear infinite;
}

.slide-03-bg-glow {
    background:
        radial-gradient(circle at 50% 36%, rgba(125, 211, 252, 0.15) 0%, rgba(125, 211, 252, 0) 26%),
        radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0) 44%);
}

.slide-03-bg-orbit::before,
.slide-03-bg-orbit::after {
    content: '';
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.slide-03-bg-orbit::before {
    width: 980px;
    height: 980px;
    left: 470px;
    top: 32px;
    border: 1px solid rgba(30, 96, 248, 0.06);
}

.slide-03-bg-orbit::after {
    width: 880px;
    height: 220px;
    left: 520px;
    top: 636px;
    background: linear-gradient(90deg, rgba(30, 96, 248, 0), rgba(30, 96, 248, 0.09), rgba(14, 165, 233, 0.08), rgba(16, 185, 129, 0.07), rgba(30, 96, 248, 0));
    filter: blur(22px);
}

.slide-03-header,
.slide-03-stage,
.slide-03-platform-strip {
    position: relative;
    z-index: 2;
}

.slide-03-header {
    max-width: 1360px;
    margin: 0 0 26px;
    opacity: 0;
    transform: translateY(-22px);
    transition: opacity 0.75s ease 0.12s, transform 0.75s ease 0.12s;
}

.slide-03-title {
    position: relative;
    display: inline-block;
    margin-bottom: 18px;
    font-size: 54px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #0F172A;
}

.slide-03-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -14px;
    width: 66px;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1E60F8, #38BDF8, #10B981);
}

.slide-03-subtitle {
    max-width: 1260px;
    font-size: 22px;
    line-height: 1.62;
    color: #475569;
}

.slide-03-stage {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: center;
}

.slide-03-stage-backdrop {
    position: absolute;
    inset: 12px 0 18px;
    pointer-events: none;
}

.stage-halo {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.62;
}

.halo-left {
    width: 240px;
    height: 240px;
    left: 88px;
    top: 150px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0));
}

.halo-center {
    width: 520px;
    height: 520px;
    left: 50%;
    top: 70px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(30, 96, 248, 0.16), rgba(30, 96, 248, 0));
}

.halo-right {
    width: 240px;
    height: 240px;
    right: 88px;
    top: 150px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.14), rgba(139, 92, 246, 0));
}

.stage-link {
    position: absolute;
    top: 298px;
    height: 2px;
    background: linear-gradient(90deg, rgba(30, 96, 248, 0.08), rgba(30, 96, 248, 0.78), rgba(30, 96, 248, 0.08));
}

.stage-link::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid rgba(30, 96, 248, 0.82);
    border-right: 2px solid rgba(30, 96, 248, 0.82);
    transform: translateY(-50%) rotate(45deg);
}

.stage-link-left {
    left: 300px;
    width: 210px;
}

.stage-link-right {
    right: 300px;
    width: 210px;
}

.slide-03-side-card,
.slide-03-core-card {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.72s ease, transform 0.72s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.slide-03-side-card {
    min-height: 590px;
    padding: 24px 22px 20px;
    border-radius: 30px;
    transform: translateY(20px);
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(245, 248, 252, 0.95));
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

.slide-03-side-card::before,
.slide-03-core-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(145deg, rgba(30, 96, 248, 0.18), transparent 48%, rgba(30, 96, 248, 0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.slide-03-side-card::after,
.slide-03-core-card::after {
    content: '';
    position: absolute;
    left: 24px;
    top: 0;
    width: 68px;
    height: 5px;
    border-radius: 0 0 12px 12px;
}

.slide-03-core-card {
    min-height: 590px;
    padding: 24px 34px 26px;
    border-radius: 36px;
    transform: translateY(12px) scale(0.98);
    border: 1px solid rgba(30, 96, 248, 0.22);
    background:
        radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 38%),
        linear-gradient(180deg, rgba(245, 249, 255, 0.98), rgba(236, 243, 255, 0.97));
    box-shadow: 0 34px 70px rgba(15, 23, 42, 0.12);
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

.stage-card-media,
.core-card-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.02);
}

.stage-card-media::after,
.core-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
}

.slide-03-side-card > *:not(.stage-card-media),
.slide-03-core-card > *:not(.core-card-media) {
    position: relative;
    z-index: 2;
}

.slide-03-side-card:hover,
.slide-03-core-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.14);
}

.product-rune::after {
    background: linear-gradient(90deg, #1E60F8 0%, #60A5FA 100%);
}

.product-moha {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(241, 246, 255, 0.68)),
        linear-gradient(135deg, rgba(30, 96, 248, 0.08), rgba(96, 165, 250, 0.08));
    border-color: rgba(148, 163, 184, 0.18);
}

.product-moha::after {
    background: linear-gradient(90deg, #2E82FF 0%, #5AB8FF 100%);
}

.product-moha .stage-card-media {
    background-image: url('../../assets/images/slide-03/moha-asset-bg.svg');
}

.product-moha .stage-card-media::after {
    background:
        linear-gradient(180deg, rgba(252, 254, 255, 0.18) 0%, rgba(248, 251, 255, 0.22) 24%, rgba(241, 246, 255, 0.5) 52%, rgba(236, 243, 255, 0.9) 100%),
        linear-gradient(90deg, rgba(249, 252, 255, 0.78) 0%, rgba(245, 249, 255, 0.18) 48%, rgba(241, 246, 255, 0.5) 100%);
}

.product-llmg {
    background:
        linear-gradient(180deg, rgba(253, 254, 255, 0.78), rgba(238, 245, 255, 0.68)),
        linear-gradient(135deg, rgba(30, 96, 248, 0.09), rgba(90, 184, 255, 0.08));
    border-color: rgba(148, 163, 184, 0.18);
}

.product-llmg::after {
    background: linear-gradient(90deg, #325CF9 0%, #6C9DFF 100%);
}

.product-llmg .stage-card-media {
    background-image: url('../../assets/images/slide-03/llmg-gateway-bg.svg');
}

.product-llmg .stage-card-media::after {
    background:
        linear-gradient(180deg, rgba(253, 254, 255, 0.16) 0%, rgba(248, 251, 255, 0.2) 24%, rgba(241, 246, 255, 0.48) 54%, rgba(236, 243, 255, 0.9) 100%),
        linear-gradient(90deg, rgba(249, 252, 255, 0.72) 0%, rgba(244, 248, 255, 0.12) 50%, rgba(238, 245, 255, 0.42) 100%);
}

.product-rune .core-card-media {
    background-image: url('../../assets/images/slide-03/rune-core-bg.svg');
}

.product-rune .core-card-media::after {
    background:
        radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, rgba(245, 249, 255, 0.16) 0%, rgba(245, 249, 255, 0.2) 24%, rgba(239, 245, 255, 0.42) 54%, rgba(236, 243, 255, 0.84) 100%),
        linear-gradient(90deg, rgba(245, 249, 255, 0.66) 0%, rgba(245, 249, 255, 0.1) 42%, rgba(245, 249, 255, 0.38) 100%);
}

.stage-card-topline,
.core-card-topline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 42px;
    margin-bottom: 16px;
}

.stage-card-index,
.core-card-index {
    order: 1;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #2454D3;
    background: linear-gradient(180deg, #E5EEFF 0%, #DCE7FF 100%);
    border: 1px solid rgba(201, 214, 245, 0.9);
    flex-shrink: 0;
}

.stage-card-type,
.core-card-eyebrow {
    order: 2;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1D4ED8;
    background: rgba(30, 96, 248, 0.08);
}

.product-moha .stage-card-type {
    color: #1D4ED8;
    background: rgba(59, 130, 246, 0.1);
}

.product-llmg .stage-card-type {
    color: #1E40AF;
    background: rgba(96, 165, 250, 0.12);
}

.slide-03-side-card h3,
.slide-03-core-card h3 {
    margin-bottom: 14px;
    color: #0F172A;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.slide-03-side-card h3 {
    font-size: 32px;
    line-height: 1.18;
}

.slide-03-core-card h3 {
    font-size: 44px;
    line-height: 1.06;
}

.stage-card-summary,
.core-card-summary {
    color: #475569;
}

.stage-card-summary {
    margin-bottom: 0;
    font-size: 19px;
    line-height: 1.62;
}

.core-card-summary {
    max-width: 92%;
    margin-bottom: 24px;
    font-size: 22px;
    line-height: 1.66;
}

.stage-card-tags,
.core-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.stage-card-tags {
    margin-top: 0;
    margin-bottom: 16px;
}

.core-card-tags {
    margin-top: 0;
    margin-bottom: 22px;
}

.stage-card-tags span,
.core-card-tags span {
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: #334155;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(148, 163, 184, 0.2);
    backdrop-filter: blur(6px);
}

.core-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.core-card-block {
    padding: 18px 18px 16px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 248, 255, 0.94));
    border: 1px solid rgba(191, 205, 229, 0.75);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(8px);
}

.core-block-label {
    display: inline-flex;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1D4ED8;
}

.core-card-block p {
    font-size: 18px;
    line-height: 1.6;
    color: #334155;
}

.stage-card-footer,
.core-card-footer {
    margin-top: auto;
    min-height: 78px;
    display: flex;
    align-items: center;
    border-radius: 20px;
    padding: 16px 18px;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 700;
    color: #0F172A;
    background: linear-gradient(135deg, rgba(30, 96, 248, 0.08), rgba(147, 197, 253, 0.08));
    border: 1px solid rgba(147, 197, 253, 0.42);
    backdrop-filter: blur(8px);
}

.product-moha .stage-card-footer {
    background: linear-gradient(135deg, rgba(30, 96, 248, 0.08), rgba(186, 230, 253, 0.12));
    border-color: rgba(147, 197, 253, 0.42);
}

.product-llmg .stage-card-footer {
    background: linear-gradient(135deg, rgba(49, 92, 249, 0.08), rgba(191, 219, 254, 0.12));
    border-color: rgba(147, 197, 253, 0.42);
}

.slide-03-platform-strip {
    margin-top: 16px;
    min-height: 92px;
    border-radius: 22px;
    padding: 18px 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(96, 165, 250, 0.18);
    background: linear-gradient(135deg, #0F172A 0%, #14347A 52%, #1E60F8 100%);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.16);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.75s ease 0.52s, transform 0.75s ease 0.52s;
}

.platform-strip-label {
    min-width: 150px;
    min-height: 42px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #DBEAFE;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.slide-03-platform-strip p {
    font-size: 24px;
    line-height: 1.58;
    font-weight: 700;
    color: #F8FAFC;
}

#slide-3.active .slide-03-header,
#slide-3.active .slide-03-side-card,
#slide-3.active .slide-03-core-card,
#slide-3.active .slide-03-platform-strip {
    opacity: 1;
}

#slide-3.active .slide-03-header,
#slide-3.active .slide-03-side-card,
#slide-3.active .slide-03-platform-strip {
    transform: translateY(0);
}

#slide-3.active .slide-03-core-card {
    transform: translateY(0) scale(1);
}

#slide-3.active .product-moha {
    transition-delay: 0.24s;
}

#slide-3.active .product-rune {
    transition-delay: 0.36s;
}

#slide-3.active .product-llmg {
    transition-delay: 0.48s;
}

@keyframes slide-03-grid-drift {
    0% {
        background-position: 0 0, 0 0;
    }
    100% {
        background-position: 56px 56px, 56px 56px;
    }
}