/* Cache-safe V19 additions for CAYIN Digital Signage. */

.cayin-solution-path,
.cayin-fivew,
.cayin-architecture {
  margin: 56px auto 0;
  max-width: 1280px;
}

.cayin-solution-path {
  align-items: center;
  background:
    radial-gradient(circle at 88% 12%, rgba(49, 215, 255, 0.18), transparent 24%),
    #071a3d;
  border-radius: 24px;
  color: #fff;
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  padding: clamp(30px, 5vw, 62px);
}

.cayin-solution-path .eyebrow {
  color: #31d7ff;
}

.cayin-solution-path h2 {
  font-family: var(--font-sora), Arial, sans-serif;
  font-size: clamp(2rem, 3.3vw, 3.4rem);
  letter-spacing: -0.05em;
  line-height: 1.08;
  margin: 0;
}

.cayin-solution-path p:not(.eyebrow) {
  color: #a9b9cf;
  line-height: 1.8;
  margin: 20px 0 0;
}

.cayin-solution-actions {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cayin-solution-actions .text-link {
  color: #73e7ff;
}

.cayin-fivew {
  padding: 92px 32px;
}

.cayin-fivew-heading {
  display: grid;
  gap: 42px;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  margin-bottom: 38px;
}

.cayin-fivew-heading h2,
.cayin-architecture h2 {
  color: #071a3d;
  font-family: var(--font-sora), Arial, sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 4.7rem);
  letter-spacing: -0.055em;
  line-height: 1.03;
  margin: 0;
}

.cayin-fivew-heading > p {
  color: #52637b;
  line-height: 1.85;
  margin: 0;
}

.cayin-architecture {
  background: #071a3d;
  border-radius: 28px;
  color: #fff;
  max-width: 1360px;
  padding: 72px 32px;
}

.cayin-architecture h2 {
  color: #fff;
  max-width: 850px;
}

.cayin-architecture > p {
  color: #a9b9cf;
  line-height: 1.8;
  max-width: 820px;
}

.architecture-flow {
  align-items: stretch;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  margin-top: 46px;
}

.architecture-flow article {
  background: #0d2b61;
  border: 1px solid rgba(49, 215, 255, 0.36);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 22px;
}

.architecture-flow article span {
  color: #31d7ff;
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.architecture-flow article strong {
  font-family: var(--font-sora), Arial, sans-serif;
  font-size: 1rem;
  margin-top: auto;
}

.architecture-flow article small {
  color: #9fb2cf;
  font-size: 0.72rem;
  line-height: 1.55;
  margin-top: 8px;
}

.architecture-flow > i {
  align-self: center;
  color: #31d7ff;
  font-style: normal;
}

.architecture-note {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #8fa3c0;
  font-size: 0.75rem;
  margin-top: 30px;
  padding-top: 20px;
}

@media (max-width: 980px) {
  .cayin-solution-path,
  .cayin-fivew-heading {
    grid-template-columns: 1fr;
  }

  .architecture-flow {
    grid-template-columns: 1fr;
  }

  .architecture-flow > i {
    justify-self: center;
    transform: rotate(90deg);
  }

  .architecture-flow article {
    min-height: 150px;
  }
}

@media (max-width: 620px) {
  .cayin-fivew,
  .cayin-architecture {
    padding: 68px 22px;
  }

  .cayin-architecture {
    border-radius: 0;
  }
}