/* blocks/solutions/block */
#solutions {
  scroll-margin-top:125px;
}

.solutions-section {
  background:#182631;
  color:#f5f8fc;
  border-radius:15px;
  padding:60px 48px 42px;
  margin:0 -2.2vw;
  position:relative;
  overflow:hidden;
}

.solutions-section:before {
  content:"";
  position:absolute;
  pointer-events:none;
  width:500px;
  height:500px;
  right:-120px;
  top:-200px;
  border:1px solid #ffffff09;
  border-radius:50%;
  box-shadow:0 0 0 65px #ffffff02,0 0 0 130px #ffffff02;
}

.solutions-section .section-index {
  color:#9baebf;
}

.solutions-section h2 span {
  color:#89baff;
}

.solutions-section p {
  color:#b2c1cf;
}

.solution-workspace {
  position:relative;
  display:grid;
  grid-template-columns:31% 1fr;
  border:1px solid #53667570;
  border-radius:10px;
  overflow:hidden;
  margin-top:40px;
  min-height:300px;
}

.solution-tabs {
  padding:20px;
  display:flex;
  flex-direction:column;
  background:#111f2990;
  justify-content:center;
}

.solution-tabs button {
  border:0;
  border-bottom:1px solid #ffffff12;
  background:transparent;
  text-align:left;
  display:flex;
  gap:12px;
  align-items:center;
  min-height:72px;
  cursor:pointer;
  color:#a6b8c7;
  font-size:15px;
  padding:14px 12px;
  border-radius:5px;
}

.solution-tabs button>span:first-child {
  font-size:12px;
  color:#7f95a8;
}

.solution-tabs button>span:last-child {
  margin-left:auto;
}

.solution-tabs button[aria-selected=true] {
  background:#d6e7ff;
  color:#203851;
  border-bottom-color:transparent;
}

.solution-tabs button[aria-selected=true]>span {
  color:#355d8c;
}

.solution-tabs button:hover:not([aria-selected=true]) {
  background:#ffffff08;
  color:#fff;
}

.solution-panel {
  padding:34px 37px;
  background:linear-gradient(140deg,#ffffff05,transparent);
  align-self:center;
  min-width:0;
}

.solution-panel h3 {
  font-size:25px;
  line-height:1.25;
  letter-spacing:-.6px;
  font-weight:500;
  margin:32px 0 12px;
}

.solution-panel p {
  font-size:15px;
  line-height:1.7;
  margin:0;
  max-width:690px;
}

.workflow {
  display:flex;
  align-items:center;
  gap:0;
  min-height:58px;
}

.workflow-node {
  background:#293e4e;
  border:1px solid #617e9250;
  border-radius:5px;
  padding:14px 10px;
  white-space:nowrap;
  font-size:12px;
  text-align:center;
  position:relative;
  z-index:1;
}

.workflow-core {
  background:#315a8a;
  border-color:#72a0dd77;
  color:#dbeaff;
}

.workflow-wire {
  height:1px;
  background:#49677f;
  min-width:15px;
  flex:1;
  position:relative;
  overflow:visible;
}

.workflow-wire:after {
  content:"";
  width:5px;
  height:5px;
  background:#a6ceff;
  box-shadow:0 0 10px #98c5ff;
  position:absolute;
  top:-2px;
  left:0;
  border-radius:50%;
  opacity:0;
  animation:signal-travel 3.5s linear 1;
}

.workflow-wire:nth-of-type(4):after {
  animation-delay:1.1s;
}

.solution-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}

.solution-tags span {
  font-size:12px;
  padding:7px 10px;
  background:#ffffff06;
  border:1px solid #ffffff12;
  border-radius:4px;
  color:#aebfd0;
}

.solution-bottom {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  margin-top:27px;
}

.solution-bottom p {
  font-size:13px;
  line-height:1.7;
  margin:0;
}

.light-action {
  display:inline-flex;
  align-items:center;
  gap:20px;
  border-bottom:1px solid #6d879d;
  padding:12px 0;
  color:#e5f1ff;
  font-size:14px;
  white-space:nowrap;
}

.light-action:hover {
  color:#a8caff;
}

.light-action span {
  font-size:21px;
}

.solution-catalog-link {display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #53667570;margin-top:26px;padding:23px 0 0;color:#e5f1ff}
.solution-catalog-link>span:first-child {display:flex;flex-direction:column;gap:7px;min-width:0}
.solution-catalog-link strong {font-size:16px;font-weight:500}
.solution-catalog-link small {font-size:12px;color:#a5b9cc;line-height:1.6}
.solution-catalog-link>span:last-child {font-size:26px;border:1px solid #6d879d;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;flex:none}
.solution-catalog-link:hover {color:#a8caff}

@keyframes signal-travel {0%{left:0;opacity:0}10%,80%{opacity:1}100%{left:100%;opacity:0}}


@media(min-width:1800px) {
.solutions-section {
  margin-left:-35px;
  margin-right:-35px;
}
}

@media(max-width:1150px) {
.solutions-section {
  padding:45px 30px;
}
.solution-workspace {
  grid-template-columns:33% 1fr;
}
.solution-panel {
  padding:25px;
}
.workflow-node {
  font-size:11px;
  padding:12px 8px;
}
.solution-tabs {
  padding:12px;
}
.solution-tabs button {
  font-size:14px;
  gap:7px;
}
.solution-bottom p br {
  display:none;
}
.solution-bottom p {
  max-width:460px;
}
}

@media(max-width:900px) {
.solution-workspace {
  grid-template-columns:1fr;
}
.solution-tabs {
  flex-direction:row;
  padding:10px;
  gap:6px;
}
.solution-tabs button {
  flex:1;
  min-height:64px;
  line-height:1.4;
  font-size:14px;
  border:0;
}
.solution-tabs button>span:first-child {
  display:none;
}
.solution-tabs button>span:last-child {
  display:none;
}
.solution-panel {
  padding:28px;
  min-height:275px;
}
.workflow-node {
  font-size:13px;
  padding:14px 18px;
}
.solution-bottom {
  align-items:flex-start;
}
}

@media(max-width:640px) {
#solutions {
  scroll-margin-top:103px;
}
.solutions-section {
  margin:0 -10px;
  padding:35px 20px 29px;
  border-radius:10px;
}
.solutions-section .section-index {
  gap:10px;
}
.solutions-section .section-index>span:last-child {
  max-width:115px;
}
.solution-workspace {
  margin-top:25px;
}
.solution-tabs {
  flex-direction:column;
  padding:8px;
  gap:4px;
}
.solution-tabs button {
  min-height:50px;
  padding:12px;
  justify-content:flex-start;
  font-size:14px;
}
.solution-tabs button>span:first-child,
.solution-tabs button>span:last-child {
  display:block;
}
.solution-tabs button>span:first-child {
  margin-right:8px;
}
.solution-panel {
  padding:22px 17px;
  min-height:380px;
}
.workflow {
  flex-direction:column;
  align-items:stretch;
  gap:0;
  min-height:0;
  width:100%;
}
.workflow-node {
  font-size:12px;
  padding:11px 9px;
  align-self:stretch;
}
.workflow-wire {
  height:17px;
  width:1px;
  min-width:0;
  min-height:17px;
  flex:0 0 17px;
  margin:auto;
}
.workflow-wire:after {
  top:0;
  left:-2px;
  animation-name:signal-vertical;
}
.solution-panel h3 {
  font-size:23px;
  margin-top:23px;
}
.solution-panel p {
  font-size:15px;
}
.solution-tags {
  gap:6px;
  margin-top:17px;
}
.solution-tags span {
  font-size:11px;
  padding:6px 8px;
}
.solution-bottom {
  flex-direction:column;
  gap:13px;
}
.solution-bottom p {
  font-size:13px;
  line-height:1.7;
}
.solution-bottom p br {
  display:none;
}
.light-action {
  font-size:14px;
}
}

@media(max-width:360px) {
.solutions-section {
  padding-left:14px;
  padding-right:14px;
}
}

@keyframes signal-vertical {0%{top:0;opacity:0}10%,80%{opacity:1}100%{top:100%;opacity:0}}

@media(prefers-reduced-motion:reduce) {
.workflow-wire:after {
  animation:none;
}
}