.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(135deg, #1b2f63 0%, #203c85 55%, #24337a 100%);
box-shadow:
0 20px 50px rgba(16,27,66,0.55),
0 8px 20px rgba(16,27,66,0.30);
} .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: #fff !important;
}
.decision-tool .section-desc {
max-width: 42rem;
margin: 0 auto;
line-height: 1.75;
color: rgba(255,255,255,0.72);
} .decision-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 3rem;
}
.decision-filter {
appearance: none;
border: 2px solid rgba(255,255,255,0.90);
background: rgba(255,255,255,0.10);
border-radius: 999px;
padding: 1rem 1.8rem;
font-size: 0.95rem;
font-weight: 600;
color: #fff;
cursor: pointer;
transition:
transform var(--transition-fast),
border-color var(--transition-fast),
background var(--transition-fast);
}
.decision-filter:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,0.50);
background: transparent;
}
.decision-filter.is-active {
transform: translateY(-2px);
background: rgba(255,255,255,0.18);
border: 2px solid #fff;
color: #fff;
} .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) center/cover no-repeat;
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-card-inner {
border: none;
perspective: 1400px;
perspective-origin: 50% 50%;
} .decision-card-bg {
position: absolute;
inset: -4%;
background-size: cover;
background-position: center;
will-change: transform, filter;
transform-origin: center center;
transform-style: preserve-3d;
} .decision-card-deep {
position: absolute;
inset: -5%;
background-size: cover;
background-position: center;
opacity: 0.28;
mix-blend-mode: screen;
will-change: transform;
transform-origin: center center;
} .decision-card-bg::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 55% at 50% 50%, transparent 20%, rgba(0,0,0,0.58) 100%),
linear-gradient(160deg, rgba(16,27,66,0.62) 0%, rgba(16,27,66,0.38) 100%);
animation: vignette-breathe 5.3s ease-in-out infinite;
}
@keyframes vignette-breathe {
0%, 100% { opacity: 1; }
50%       { opacity: 0.58; }
} .dc-fx {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
border-radius: inherit;
background: repeating-linear-gradient(
0deg,
transparent        0px,
transparent        2px,
rgba(0,0,0,0.048)  2px,
rgba(0,0,0,0.048)  3px
);
} @keyframes card-glitch {
0%, 86%, 100% {
filter: none;
transform: none;
clip-path: none;
}
87% {
filter: hue-rotate(88deg) saturate(3.5) brightness(1.4) contrast(1.25);
transform: translate(-5px, 0) skewX(-1.8deg);
clip-path: polygon(0 14%, 100% 14%, 100% 32%, 0 32%);
}
87.5% {
filter: hue-rotate(-72deg) saturate(2.8) brightness(1.2);
transform: translate(4px, 0) skewX(1deg);
clip-path: none;
}
88% {
filter: none;
transform: none;
clip-path: none;
}
91% {
filter: hue-rotate(175deg) saturate(4.2) brightness(1.55) contrast(1.3);
transform: translate(-3px, 0) skewX(-0.9deg);
clip-path: polygon(0 57%, 100% 57%, 100% 76%, 0 76%);
}
91.3% {
filter: hue-rotate(0deg) saturate(1) brightness(1);
transform: translate(3px, 0);
clip-path: none;
}
91.6% {
filter: none;
transform: none;
}
94% {
filter: hue-rotate(52deg) saturate(2.6) brightness(1.28);
transform: translate(-2px, 0);
clip-path: polygon(0 4%, 100% 4%, 100% 16%, 0 16%);
}
94.3% {
filter: none;
transform: none;
clip-path: none;
}
}
.decision-card-inner:has(.decision-card-bg) {
animation: card-glitch 13s step-end infinite;
} .decision-card-content {
position: relative;
z-index: 3;
}
@media (prefers-reduced-motion: reduce) {
.decision-card-bg,
.decision-card-bg::after,
.decision-card-inner:has(.decision-card-bg) {
animation: none;
}
} .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-card-inner:has(.decision-card-bg) .decision-title {
color: #fff !important;
} .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-card-inner:has(.decision-card-bg) .decision-text,
.decision-card-inner:has(.decision-card-bg) .decision-text strong {
color: rgba(255,255,255,0.88);
} .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;
}
}