.decision-tool {
position: relative;
margin-top: 2rem;
padding: 7rem 0 4.5rem;
overflow: hidden;
isolation: isolate;
border-radius: 0.8rem 2rem 2rem 2rem;
background: linear-gradient(
100deg,
#fcfdff 0%,
#f7faff 18%,
#f3f7ff 48%,
#f6f9ff 78%,
#fbfdff 100%
);
box-shadow:
0 20px 50px rgba(15,23,42,0.06),
0 8px 20px rgba(15,23,42,0.04);
} .decision-tool::before,
.decision-tool::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
} .decision-tool::before {
background:
radial-gradient(
ellipse at 8% 18%,
rgba(255,255,255,0.95) 0%,
rgba(255,255,255,0.48) 16%,
transparent 38%
),
radial-gradient(
ellipse at 84% 14%,
rgba(255,255,255,0.90) 0%,
rgba(255,255,255,0.40) 16%,
transparent 38%
),
radial-gradient(
ellipse at 18% 82%,
rgba(255,255,255,0.84) 0%,
rgba(255,255,255,0.24) 18%,
transparent 42%
),
radial-gradient(
ellipse at 88% 76%,
rgba(255,255,255,0.80) 0%,
rgba(255,255,255,0.20) 20%,
transparent 44%
),
radial-gradient(
ellipse at 54% 54%,
rgba(255,255,255,0.32) 0%,
rgba(255,255,255,0.08) 20%,
transparent 46%
);
filter: blur(46px);
opacity: 0.96;
} .decision-tool::after {
background:
radial-gradient(
circle at 28% 34%,
rgba(255,255,255,0.68) 0%,
rgba(255,255,255,0.12) 14%,
transparent 30%
),
radial-gradient(
circle at 74% 28%,
rgba(255,255,255,0.58) 0%,
rgba(255,255,255,0.10) 14%,
transparent 30%
),
radial-gradient(
circle at 52% 72%,
rgba(255,255,255,0.34) 0%,
rgba(255,255,255,0.06) 16%,
transparent 32%
),
radial-gradient(
circle at 42% 18%,
rgba(255,255,255,0.28) 0%,
rgba(255,255,255,0.04) 14%,
transparent 28%
);
filter: blur(58px);
opacity: 0.68;
} .decision-ambient {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: auto;
}
.ambient-logo {
position: absolute;
height: auto;
opacity: 0.32;
z-index: 1;
pointer-events: auto;
transform: translate3d(0,0,0);
will-change: transform, opacity;
user-select: none;
filter: drop-shadow(
0 6px 14px rgba(15,23,42,0.10)
);
transition:
opacity 0.22s ease,
filter 0.22s ease;
}
.ambient-logo.is-active {
opacity: 0.9;
filter: drop-shadow(
0 10px 20px rgba(15,23,42,0.14)
);
} .decision-tool-inner {
position: relative;
z-index: 10;
} .decision-tool .section-head {
text-align: center;
margin-bottom: 4.25rem;
}
.decision-tool .section-title {
margin-bottom: 1rem;
color: var(--color-text-main);
}
.decision-tool .section-desc {
max-width: 42rem;
margin: 0 auto;
line-height: 1.75;
color: var(--color-text-muted);
} .decision-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 3rem;
}
.decision-filter {
appearance: none;
border: 2px solid #e5e7eb;
background: rgba(255,255,255,0.96);
border-radius: 999px;
padding: 1rem 1.8rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text-main);
cursor: pointer;
box-shadow:
0 8px 18px rgba(15,23,42,0.05);
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
border-color var(--transition-fast),
background var(--transition-fast);
}
.decision-filter:hover {
transform: translateY(-2px);
border-color: #bfdbfe;
box-shadow:
0 12px 24px rgba(15,23,42,0.07);
}
.decision-filter.is-active {
transform: translateY(-2px);
background: #f1f5f9;
border: 2px solid #93c5fd;
color: var(--color-text-main);
box-shadow:
0 8px 18px rgba(59,130,246,0.08);
} .decision-card {
display: none;
}
.decision-card.is-active {
display: block;
}
.decision-card-inner {
position: relative;
z-index: 12;
max-width: 920px;
min-height: 440px;
margin: 4rem auto 2rem;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
overflow: hidden;
padding: 2rem 2rem;
border-radius: 0.8rem 2rem 2rem 2rem;
background: rgba(255,255,255,0.94);
border: 1px solid rgba(15,23,42,0.04);
box-shadow:
0 18px 42px rgba(15,23,42,0.08),
0 4px 12px rgba(15,23,42,0.03);
} .decision-title {
margin: 0 0 1.75rem;
font-size: 2.25rem;
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--color-text-main);
} .decision-text {
max-width: 42rem;
margin: 0 auto 4rem;
font-size: 1.05rem;
line-height: 1.82;
color: var(--color-text-muted);
}
.decision-text strong {
color: var(--color-text-main);
} .decision-cta {
display: flex;
justify-content: center;
margin-bottom: 0;
}
.decision-cta .us-btn {
min-width: 17rem;
} @media (max-width: 1024px) {
.decision-card-inner {
min-height: 460px;
padding: 4rem 2.5rem;
}
.ambient-logo {
width: 54px !important;
}
}
@media (max-width: 768px) {
.decision-tool {
margin-top: 4rem;
padding: 5rem 1rem 3rem;
border-radius: 1.5rem;
}
.decision-tool .section-head {
margin-bottom: 2.5rem;
}
.decision-filters {
gap: 0.85rem;
margin-bottom: 2rem;
}
.decision-filter {
width: 100%;
padding: 1.15rem 1.4rem;
font-size: 1rem;
}
.decision-card-inner {
min-height: auto;
margin: 2rem 1rem 1rem;
padding: 3rem 1.75rem;
border-radius: 1.5rem;
}
.decision-title {
margin: 0 0 1.25rem;
font-size: 2rem;
line-height: 1.12;
}
.decision-text {
margin-bottom: 2.5rem;
font-size: 1rem;
line-height: 1.75;
}
.decision-cta .us-btn {
width: 100%;
min-width: auto;
}
.ambient-logo {
width: 60px !important;
}
}