.scene-solution, .scene-solution * {margin:0; padding:0; box-sizing: border-box; }

.scene-solution {font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; color: #333; background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; }

.scene-solution a {color: inherit; text-decoration: none; }

.scene-solution img, .scene-solution svg {display: block; max-width: 100%; }

.scene-solution {--gold: #FFCB33;
    --gold-soft: rgba(255, 203, 51, 0.08);
    --ink: #171C2B;
    --text: #333;
    --text-muted: #666;
    --border: #e5e5e5;
    --border-light: #f0f0f0;
    --bg-gray: #f5f5f5;
    --radius: 8px;
    --shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.16);
    --transition: 0.5s cubic-bezier(0.2, 0, 0, 1); }

.scene-solution .scene-container {margin: 0 auto; padding: 0 15px; }

@media (min-width: 768px) {
.scene-solution .scene-container {width: 95%; }
}

@media (min-width: 1400px) {
.scene-solution .scene-container {width: 1240px; }
}

@media (min-width: 1600px) {
.scene-solution .scene-container {width: 1440px; }
}

.scene-solution .hero {padding: 80px 0 88px;
    background: url('/skin/images/solutions/db-ops-security/hero-bg-yw.jpg') center / cover no-repeat;
    color: #fff; position: relative; overflow: hidden; }

.scene-solution .hero::before {content: '';
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(to right,
                rgba(23,28,43,1) 0%,
                rgba(23,28,43,0.7) 30%,
                rgba(23,28,43,0.2) 60%,
                rgba(23,28,43,0) 80%,
                rgba(23,28,43,0) 100%);
    pointer-events: none; }

.scene-solution .hero .scene-container {position: relative; z-index: 1; }

.scene-solution .hero-left {max-width: 75%; }

.scene-solution .hero h1 {font-size: 34px; font-weight: 700; line-height: 1.3; color: #fff; margin-bottom: 16px; }

.scene-solution .hero-subtitle {color: var(--gold); font-size: 20px; font-weight: 500; margin-bottom: 20px; letter-spacing: 1px; }

.scene-solution .hero-sub {color: rgba(255,255,255,0.82); font-size: 16px; line-height: 1.85; margin-bottom: 28px; }

.scene-solution .hero-cta-row {display: flex; gap: 12px; }

.scene-solution .hero .btn-primary {background: var(--gold); color: var(--ink); border: none;
    padding: 13px 36px; border-radius: 30px; font-size: 16px;
    font-weight: 600; cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition); }

.scene-solution .hero .btn-primary:hover {background: #fff; box-shadow: 0 0 0 1px var(--gold), 0 4px 16px rgba(0, 0, 0, 0.15); transform: translateY(-1px); }

.scene-solution section {padding: 72px 0; }

.scene-solution section.gray {background: var(--bg-gray); }

.scene-solution .section-title {font-size: 34px; margin-bottom: 14px; color: var(--ink);
    line-height: 1.3; text-align: center; }

@media (max-width: 1660px) {
.scene-solution .section-title, .scene-solution .hero h1 {font-size: 32px; }
}

@media (max-width: 1500px) {
.scene-solution .section-title, .scene-solution .hero h1 {font-size: 30px; }
}

.scene-solution .section-title::after {content: ''; display: block; width: 40px; height: 3px;
    background: var(--gold); margin: 10px auto 0; }

.scene-solution .section-desc {font-size: 16px; color: var(--text-muted); margin: 0 auto 32px; line-height: 1.7; text-align: center; }

.scene-solution .feature-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.scene-solution .feature-card {background: #fff; border-radius: var(--radius);
    padding: 26px 20px; box-shadow: var(--shadow);
    transition: box-shadow var(--transition), transform var(--transition), background var(--transition); }

.scene-solution .reveal.feature-card:hover {box-shadow: 0 14px 30px rgba(0, 0, 0, 0.13); transform: translateY(-8px); background: #e8e8e8; }

.scene-solution .feature-card .icon {width: 44px; height: 44px; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; background: var(--gold-soft); color: var(--ink);
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition); }

.scene-solution .feature-card .icon svg {width: 24px; height: 24px; stroke: var(--ink); stroke-width: 1.5; fill: none; transition: transform var(--transition); }

.scene-solution .feature-card:hover .icon {background: linear-gradient(135deg, #E5B01A 0%, #FFCB33 100%);
    box-shadow: 0 6px 14px rgba(255, 203, 51, 0.35); }

.scene-solution .feature-card:hover .icon svg {transform: scale(1.15); }

.scene-solution .feature-card h4 {font-size: 20px; font-weight: 600; margin-bottom: 10px; color: var(--ink); line-height: 1.4; }

.scene-solution .feature-card p {font-size: 16px; color: var(--text-muted); line-height: 1.75; }

.scene-solution .challenge-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.scene-solution .challenge-card {background: #f0f0f0; border-radius: var(--radius);
    padding: 30px 20px; position: relative; overflow: hidden;
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition), transform var(--transition), background var(--transition); }

.scene-solution .reveal.challenge-card:hover {box-shadow: 0 14px 30px rgba(0, 0, 0, 0.13); transform: translateY(-8px); background: #e8e8e8; }

.scene-solution .challenge-num {font-size: 40px; font-weight: 700; color: var(--gold); opacity: 0.18;
    position: absolute; top: 16px; right: 20px; line-height: 1; font-family: 'Georgia', serif;
    font-variant-numeric: tabular-nums;
    transition: opacity var(--transition), transform var(--transition); }

.scene-solution .challenge-card:hover .challenge-num {opacity: 1; transform: scale(1.12) translateX(-3px); }

.scene-solution .challenge-num .num-big, .scene-solution .diff-num .num-big {display: inline-block;
    transform: scale(1.16);
    transform-origin: top center; }

.scene-solution .challenge-card h4 {font-size: 20px; font-weight: 600; margin-bottom: 10px; color: var(--ink); line-height: 1.4; }

.scene-solution .challenge-card p {font-size: 16px; color: var(--text-muted); line-height: 1.75; }

.scene-solution section.diff-section {background: var(--ink); }

.scene-solution section.diff-section .section-title {color: #fff; }

.scene-solution section.diff-section .section-title::after {background: var(--gold); }

.scene-solution .diff-wrap {display: flex; align-items: stretch; gap: 20px; }

.scene-solution .diff-col {flex: 1; background: #fff; border-radius: var(--radius); padding: 32px 28px;
    position: relative; overflow: hidden; box-shadow: var(--shadow);
    transition: box-shadow var(--transition), transform var(--transition), background var(--transition); }

.scene-solution .reveal.diff-col:hover {box-shadow: 0 14px 30px rgba(0, 0, 0, 0.13); transform: translateY(-8px); background: #e8e8e8; }

.scene-solution .diff-num {font-size: 40px; font-weight: 700; color: var(--gold); opacity: 0.18;
    position: absolute; top: 16px; right: 20px; line-height: 1; font-family: 'Georgia', serif;
    font-variant-numeric: tabular-nums;
    transition: opacity var(--transition), transform var(--transition); }

.scene-solution .diff-col:hover .diff-num {opacity: 1; transform: scale(1.12) translateX(-3px); }

.scene-solution .diff-col h4 {font-size: 20px; font-weight: 600; margin-bottom: 20px; color: var(--ink); }

.scene-solution .diff-item {padding: 12px 0; border-bottom: 1px solid var(--border-light); font-size: 16px; line-height: 1.75; }

.scene-solution .diff-item:last-child {border-bottom: none; }

.scene-solution .arch-img-card {display: inline-block; width: auto; max-width: 100%;
    background: #f0f0f0; border-radius: var(--radius); padding: 12px;
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition), transform var(--transition), background var(--transition); }

.scene-solution .arch-img-card:hover {box-shadow: var(--shadow-hover); transform: translateY(-4px); background: #e8e8e8; }

.scene-solution .arch-img-frame {overflow: hidden; border-radius: var(--radius); }

.scene-solution .arch-img-card img {display: block; width: auto; height: auto; max-height: 540px; max-width: 100%;
    border-radius: 4px;
    transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1); }

.scene-solution .arch-img-card:hover img {transform: scale(1.04); }

.scene-solution .arch-carousel {position: relative; margin-top: 8px; }

.scene-solution .arch-viewport {overflow: hidden; }

.scene-solution .arch-track {display: flex; transition: transform 0.6s cubic-bezier(0.2, 0, 0, 1); }

.scene-solution .arch-slide {min-width: 100%; text-align: center; }

.scene-solution .arch-slide .arch-img-card {display: inline-block; }

.scene-solution .value-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.scene-solution .value-card {background: #fff; border-radius: var(--radius); padding: 32px 28px;
    box-shadow: var(--shadow);
    transition: box-shadow var(--transition), transform var(--transition), background var(--transition); }

.scene-solution .reveal.value-card:hover {box-shadow: 0 14px 30px rgba(0, 0, 0, 0.13); transform: translateY(-8px); background: #e8e8e8; }

.scene-solution .value-num {display: inline-block; font-size: 12px; background: var(--gold); color: var(--ink);
    padding: 3px 12px; border-radius: 10px; margin-bottom: 12px; font-weight: 600; letter-spacing: 0.5px; }

.scene-solution .value-card h4 {font-size: 20px; font-weight: 600; margin-bottom: 12px; color: var(--ink); }

.scene-solution .value-card p {font-size: 16px; color: var(--text-muted); line-height: 1.75; }

.scene-solution .btn-primary {display: inline-block;
    background: var(--gold); color: var(--ink); border: none;
    padding: 13px 32px; border-radius: 30px; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition); }

.scene-solution .btn-primary:hover {background: #fff; box-shadow: 0 0 0 1px var(--gold), 0 4px 12px rgba(0, 0, 0, 0.12); transform: translateY(-1px); }

.scene-solution .btn-outline {display: inline-block;
    background: transparent; color: var(--ink); border: 1px solid var(--border);
    padding: 13px 32px; border-radius: 30px; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition); }

.scene-solution .btn-outline:hover {border-color: var(--gold); background: var(--gold); color: var(--ink); }

.scene-solution .faq-grid {display: flex; flex-direction: column; gap: 20px; }

.scene-solution .faq-item {border-radius: var(--radius); padding: 20px 24px; background: #f0f0f0; box-shadow: var(--shadow);
    transition: box-shadow var(--transition), transform var(--transition), background var(--transition); }

.scene-solution .reveal.faq-item:hover {box-shadow: var(--shadow-hover); transform: translateY(-2px); background: #e8e8e8; }

.scene-solution .faq-q {font-size: 17px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }

.scene-solution .faq-a {font-size: 16px; color: var(--text-muted); line-height: 1.75; }

.scene-solution .client-logo-section {padding: 56px 0; background: #fff; overflow: hidden; }

.scene-solution .client-logo-section h2 {text-align: center; font-size: 30px; font-weight: 400; line-height: 1.5; color: #333; margin-bottom: 0; padding-bottom: 30px; }

.scene-solution .custom-swiper {overflow: hidden; position: relative; }

.scene-solution .custom-swiper .swiper-wrapper {display: flex; width: 100%; }

.scene-solution .custom-swiper .swiper-wrapper .swiper-slide {width: 20%; height: 112px; flex-shrink: 0; text-align: center; position: relative;
    display: flex; align-items: center; justify-content: center;
    animation: sceneClientScroll 117s linear infinite; }

.scene-solution .custom-swiper .swiper-wrapper .swiper-slide img {display: block; width: 88%; height: 100%;
    object-fit: contain; object-position: center center; }

.scene-solution .custom-mask {position: absolute; top: 0; left: 0; right: 0; height: 100%;
    display: flex; justify-content: space-between; width: 100%; pointer-events: none; }

.scene-solution .custom-mask div {width: 20%; height: 100%; z-index: 1; }

.scene-solution .mask-left {background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 27%, rgba(255, 255, 255, 0) 100%); }

.scene-solution .mask-right {background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 80%, #FFFFFF 100%); }

@keyframes sceneClientScroll { from {left: 0; } to {left: -920%; } }

.scene-solution .reveal {opacity: 0; transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.2, 0, 0, 1), transform 0.6s cubic-bezier(0.2, 0, 0, 1);
    transition-delay: var(--reveal-delay, 0s); }

.scene-solution .reveal.is-visible {opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
.scene-solution .reveal {opacity: 1; transform: none; transition: none; }

.scene-solution .custom-swiper .swiper-wrapper .swiper-slide {animation: none; }

.scene-solution .reveal.feature-card:hover, .scene-solution .reveal.challenge-card:hover, .scene-solution .reveal.diff-col:hover, .scene-solution .reveal.value-card:hover, .scene-solution .reveal.faq-item:hover {transform: none; }

.scene-solution .feature-card:hover .icon svg {transform: none; }
}

@media (max-width: 768px) {
.scene-solution .client-logo-section {padding: 42px 0 28px; }

.scene-solution .client-logo-section h2 {font-size: 20px; }

.scene-solution .feature-grid {grid-template-columns: 1fr 1fr; }

.scene-solution .value-grid {grid-template-columns: 1fr; }

.scene-solution .diff-wrap {flex-direction: column; gap: 12px; }

.scene-solution section {padding: 48px 0; }
}

@media (max-width: 1024px) {
.scene-solution .feature-grid {grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
.scene-solution .challenge-grid {grid-template-columns: 1fr; }
}

.scene-solution.scene-classification .hero {
  background-image: url('/skin/images/solutions/classification/hero-bg-flfj.jpg');
}

.scene-solution.scene-api .hero {
  background-image: url('/skin/images/solutions/api-security/hero-bg-api.jpg');
}

.scene-solution.scene-classification .feature-grid,
.scene-solution.scene-api .feature-grid {
  grid-template-columns: repeat(3, 1fr);
}

.scene-solution.scene-classification .scene-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.scene-solution.scene-classification .arch-img-card img {
  max-height: 480px;
}

.scene-solution.scene-api .arch-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.scene-solution.scene-api .arch-card {
  background: #fafafa;
  border-radius: 10px;
  padding: 22px;
  transition: transform var(--transition), box-shadow var(--transition);
}

.scene-solution.scene-api .arch-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.scene-solution.scene-api .arch-card-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.scene-solution.scene-api .arch-card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.scene-solution.scene-api .arch-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.scene-solution.scene-api .arch-card p {
  margin: 0;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
}

@media (max-width: 1024px) {
  .scene-solution.scene-classification .feature-grid,
  .scene-solution.scene-api .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .scene-solution.scene-classification .scene-grid,
  .scene-solution.scene-api .arch-cards {
    grid-template-columns: 1fr;
  }
}