/* ============================================================
   cf-*  Shared enquiry-form block.
   Used in the close section of the four service pillar hubs and
   on Stories, so a visitor can convert without leaving the page.
   Requires the .g3 variable scope (ai-greenlight-v3.css).
   ============================================================ */

.cf-grid {
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: 60px;
  align-items: start;
}

.cf-card {
  background: #080808;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 3px solid #AA00FF;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cf-card__k {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #00FEA8;
}

.cf-in,
.cf-sel,
.cf-ta {
  width: 100%;
  box-sizing: border-box;
  background: #080808;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  padding: 14px 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  outline: none;
  transition: border-color .2s ease;
}

.cf-sel { color: rgba(255, 255, 255, 0.7); appearance: none; }
.cf-ta { resize: vertical; min-height: 92px; line-height: 1.55; }

.cf-in::placeholder,
.cf-ta::placeholder { color: rgba(255, 255, 255, 0.42); }

.cf-in:focus,
.cf-sel:focus,
.cf-ta:focus { border-color: rgba(0, 254, 168, 0.7); }

.cf-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #0A0A0A;
  background: #ffffff;
  border: none;
  border-radius: 0;
  padding: 15px 24px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease;
}

.cf-btn:hover { background: #00FEA8; color: #0A0A0A; }
.cf-btn:focus-visible { outline: 2px solid #BE7BFF; outline-offset: 2px; }

.cf-fine { font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.45); }
.cf-fine a { color: #BE7BFF; }

@media (max-width: 1024px) {
  .cf-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   ci-*  Insights row: three latest articles, placed before the
   FAQ on the hub pages to carry internal linking.
   ============================================================ */

.ci-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.ci-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 26px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  color: inherit;
  transition: border-color .3s ease, transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ci-item:hover { border-color: rgba(190, 123, 255, 0.5); transform: translateY(-4px); }
.ci-item:focus-visible { outline: 2px solid #BE7BFF; outline-offset: 3px; }

.ci-item__k { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: #00FEA8; }
.ci-item__t { margin: 0; font-size: 19px; line-height: 1.3; font-weight: 800; letter-spacing: -0.015em; color: #ffffff; text-wrap: balance; }
.ci-item__p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.6); text-wrap: pretty; }

.ci-item__go {
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  transition: color .3s ease, gap .3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ci-item:hover .ci-item__go { color: #BE7BFF; gap: 13px; }

.ci-all { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #BE7BFF; text-decoration: none; }
.ci-all:hover { color: #ffffff; }

@media (max-width: 900px) { .ci-grid { grid-template-columns: 1fr; } }