/* ===== 09-utilities.css ===== */
/* ===== inline mail-link styles from index.html ===== */
.mail-link{display:inline-flex;align-items:center;gap:8px;}
.mail-link img{width:16px;height:16px;object-fit:contain;flex:0 0 16px;}

/* =========================================================
   TERASILICON IQ — LOGO COLOR ACCENTS
   Visual-only color refinement. No layout or functionality changes.
   ========================================================= */

/* Capability / engineering blocks */
#capabilities .capability-row {
  background: #f8f5ff;
  border-left: 3px solid #653593;
}

#capabilities .capability-row:nth-child(even) {
  background: #fff8ef;
  border-left-color: #ef7700;
}

#capabilities .capability-row:hover {
  background: #f0e8ff;
}

#capabilities .capability-row:nth-child(even):hover {
  background: #fff0dc;
}

#capabilities .capability-row strong {
  color: #653593;
}

#capabilities .capability-row:nth-child(even) strong {
  color: #ef7700;
}

#capabilities .capability-row:hover strong,
#capabilities .capability-row:focus-visible strong {
  background: #653593;
  border-color: #653593;
  color: #fff;
}

#capabilities .capability-row:nth-child(even):hover strong,
#capabilities .capability-row:nth-child(even):focus-visible strong {
  background: #ef7700;
  border-color: #ef7700;
  color: #fff;
}

/* How We Work / Solutions blocks */
#solutions .grid.four .card {
  background: #f8f5ff;
  border-top: 3px solid #653593;
}

#solutions .grid.four .card:nth-child(even) {
  background: #fff8ef;
  border-top-color: #ef7700;
}

#solutions .grid.four .card > span {
  color: #653593;
}

#solutions .grid.four .card:nth-child(even) > span {
  color: #ef7700;
}

/* Signoff core cards — Terasilicon IQ logo palette */
#signoff .grid.four .card.core {
  background: #f8f5ff;
  border-top: 3px solid #653593;
}

#signoff .grid.four .card.core:nth-child(even) {
  background: #fff8ef;
  border-top-color: #ef7700;
}

#signoff .grid.four .card.core > span {
  color: #653593;
}

#signoff .grid.four .card.core:nth-child(even) > span {
  color: #ef7700;
}

#signoff .grid.four .card.core li {
  border-top-color: rgba(101, 53, 147, 0.18);
}

#signoff .grid.four .card.core:nth-child(even) li {
  border-top-color: rgba(239, 119, 0, 0.20);
}

/* =========================================================
   UNIVERSAL BLOCK HOVER EFFECT
   Subtle lift + logo-colour accent. Visual only; no layout
   or interaction behaviour is changed.
   ========================================================= */
.card {
  position: relative;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
  will-change: transform;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(16, 22, 56, 0.12);
  z-index: 2;
}

.card.core:nth-child(odd):hover {
  background: #f8f5ff;
  box-shadow: 0 14px 30px rgba(101, 53, 147, 0.16);
}

.card.core:nth-child(even):hover {
  background: #fff8ef;
  box-shadow: 0 14px 30px rgba(239, 119, 0, 0.14);
}

.card.core:nth-child(odd):hover::after,
.card.core:nth-child(even):hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
}

.card.core:nth-child(odd):hover::after {
  background: #653593;
}

.card.core:nth-child(even):hover::after {
  background: #ef7700;
}

/* Other content cards use the same restrained interaction language. */
.card:not(.core):hover {
  background: #faf8fc;
  box-shadow: 0 14px 30px rgba(101, 53, 147, 0.12);
}

.capability-use-case {
  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.capability-use-case:hover {
  background: #faf8fc;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(101, 53, 147, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .capability-use-case {
    transition: none;
  }

  .card:hover,
  .capability-use-case:hover {
    transform: none;
  }
}

/* =========================================================
   SIGNOFF / FLOW COLOR OVERRIDE
   Signoff cards keep the original alternating logo palette.
   Flow uses orange for implementation stages and purple for Signoff.
   ========================================================= */

/* Signoff cards: alternating purple / orange. */
#signoff .grid.four .card.core {
  background: #f8f5ff;
  border-top: 3px solid #653593;
}

#signoff .grid.four .card.core:nth-child(even) {
  background: #fff8ef;
  border-top-color: #ef7700;
}

#signoff .grid.four .card.core > span {
  color: #653593;
}

#signoff .grid.four .card.core:nth-child(even) > span {
  color: #ef7700;
}

#signoff .grid.four .card.core li {
  border-top-color: rgba(101, 53, 147, 0.20);
}

#signoff .grid.four .card.core:nth-child(even) li {
  border-top-color: rgba(239, 119, 0, 0.20);
}

#signoff .grid.four .card.core:hover {
  background: #f2eaff;
  border-top-color: #653593;
  box-shadow:
    0 8px 24px rgba(101, 53, 147, 0.16),
    0 0 0 1px rgba(101, 53, 147, 0.16),
    0 0 28px rgba(101, 53, 147, 0.24);
  transform: translateY(-6px);
}

#signoff .grid.four .card.core:nth-child(even):hover {
  background: #fff1df;
  border-top-color: #ef7700;
  box-shadow:
    0 8px 24px rgba(239, 119, 0, 0.15),
    0 0 0 1px rgba(239, 119, 0, 0.16),
    0 0 28px rgba(239, 119, 0, 0.24);
}

#signoff .grid.four .card.core:hover::after {
  background: #653593;
  box-shadow: 0 0 14px rgba(101, 53, 147, 0.45);
}

#signoff .grid.four .card.core:nth-child(even):hover::after {
  background: #ef7700;
  box-shadow: 0 0 14px rgba(239, 119, 0, 0.45);
}

/* Flow: implementation stages are orange; Signoff alone is purple. */
.flow-row div.flow-active,
.flow-row div.flow-active:nth-of-type(3n + 2),
.flow-row div.flow-active:nth-of-type(3n + 3) {
  color: #ef7700 !important;
}

.flow-row div.flow-active:before,
.flow-row div.flow-active:nth-of-type(3n + 2):before,
.flow-row div.flow-active:nth-of-type(3n + 3):before {
  background: #ef7700 !important;
  border-color: #ef7700 !important;
  box-shadow:
    0 0 0 5px rgba(239, 119, 0, 0.10),
    0 0 20px rgba(239, 119, 0, 0.34) !important;
}

.flow-row i {
  background: rgba(239, 119, 0, 0.38) !important;
}

.flow-row .terminal,
.flow-row .terminal.flow-active {
  color: #653593 !important;
}

.flow-row .terminal:before,
.flow-row .terminal.flow-active:before {
  background: #653593 !important;
  border-color: #653593 !important;
  box-shadow:
    0 0 0 5px rgba(101, 53, 147, 0.12),
    0 0 22px rgba(101, 53, 147, 0.38) !important;
}

.flow-row .terminal:hover:before {
  box-shadow:
    0 0 0 6px rgba(101, 53, 147, 0.15),
    0 0 28px rgba(101, 53, 147, 0.52) !important;
}