/* ==========================================================================
   Empovio — Reusable Components
   These are the only component styles on the homepage. No section is allowed
   to redesign a button, card, badge or table locally (02_Design_System.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Button — shared height, radius, typography and hover behaviour
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  height: 44px; /* minimum touch target */
  padding-inline: var(--sp-16);
  border-radius: var(--r-button);
  border: 1px solid transparent;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  /* A label is never a drag handle, and a tap should not flash a blue box. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease), color var(--t-hover) var(--ease),
    transform var(--t-micro) var(--ease);
}

.btn__icon {
  flex: none;
  transition: transform var(--t-hover) var(--ease);
}

.btn:hover .btn__icon--arrow {
  transform: translateX(3px);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.btn--lg {
  height: 52px;
  padding-inline: var(--sp-24);
  font-size: var(--fs-body);
}

.btn--sm {
  height: 36px;
  padding-inline: var(--sp-12);
  font-size: var(--fs-caption);
}

.btn--primary {
  background-color: var(--primary-600);
  color: var(--n-0);
  box-shadow: var(--shadow-1);
}
.btn--primary:hover {
  background-color: var(--primary-700);
  box-shadow: var(--shadow-1-hover);
}

.btn--secondary {
  background-color: var(--n-0);
  border-color: var(--border-strong);
  color: var(--text-primary);
  box-shadow: var(--shadow-1);
}
.btn--secondary:hover {
  background-color: var(--n-50);
  border-color: var(--n-400);
}

.btn--ghost {
  background-color: transparent;
  color: var(--text-secondary);
}
.btn--ghost:hover {
  background-color: var(--n-100);
  color: var(--text-primary);
}

.btn--danger {
  background-color: var(--danger-600);
  color: var(--n-0);
}
.btn--danger:hover {
  background-color: var(--danger-700);
}

.btn--success {
  background-color: var(--success-600);
  color: var(--n-0);
}
.btn--success:hover {
  background-color: var(--success-700);
}

.btn--icon {
  width: 44px;
  padding: 0;
  background-color: transparent;
  color: var(--text-secondary);
}
.btn--icon:hover {
  background-color: var(--n-100);
  color: var(--text-primary);
}

.btn--block {
  width: 100%;
}

.btn--loading {
  position: relative;
  color: transparent;
}
.btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--n-0);
  animation: btn-spin 700ms linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Text link with an arrow that slides on hover */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--primary-600);
  transition: color var(--t-hover) var(--ease);
}
.link-arrow svg {
  transition: transform var(--t-hover) var(--ease);
}
.link-arrow:hover {
  color: var(--primary-700);
}
.link-arrow:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Card — header / body / optional footer, 24px padding
   -------------------------------------------------------------------------- */

.card {
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-24);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease),
    transform var(--t-hover) var(--ease);
}

.card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1-hover);
}

.card--flat {
  box-shadow: none;
}

.card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
  margin-bottom: var(--sp-16);
}

.card__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}

/* A title with a description below it is already as tall as the 36px action
   beside it, so aligning both to the top is right. A title standing on its own
   is 19px tall and the action visibly hangs below it — give that title the
   action's height and centre it, so the two read as one line. */
.card__header > .card__title,
.card__header > * > .card__title:only-child {
  display: flex;
  align-items: center;
  min-height: 36px;
}

.card__footer {
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--border);
}

/* Icon tile used at the top of feature and problem cards */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-button);
  background-color: var(--n-100);
  color: var(--text-primary);
  flex: none;
}

.icon-tile--primary {
  background-color: var(--primary-50);
  color: var(--primary-700);
}
.icon-tile--ai {
  background-color: var(--ai-50);
  color: var(--ai-700);
}
.icon-tile--success {
  background-color: var(--success-50);
  color: var(--success-700);
}
.icon-tile--warning {
  background-color: var(--warning-50);
  color: var(--warning-700);
}
.icon-tile--danger {
  background-color: var(--danger-50);
  color: var(--danger-700);
}
.icon-tile--info {
  background-color: var(--info-50);
  color: var(--info-700);
}
.icon-tile--sm {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   KPI Card — icon → title → value → trend → insight
   -------------------------------------------------------------------------- */

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.kpi__head {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}

.kpi__title {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.kpi__value {
  font-size: clamp(28px, 3vw, var(--fs-h2));
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  /* Fixed-width digits: a row of KPI cards lines its numbers up, and a live
     value does not shift sideways when a 1 becomes a 4. */
  font-variant-numeric: tabular-nums;
}

.kpi__value-suffix {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin-left: var(--sp-4);
}

.kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.kpi__trend--up {
  color: var(--success-700);
}
.kpi__trend--down {
  color: var(--danger-700);
}
.kpi__trend--flat {
  color: var(--text-tertiary);
}

.kpi__insight {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  line-height: var(--lh-snug);
}

/* --------------------------------------------------------------------------
   Badge — always fully rounded, identical styling everywhere
   -------------------------------------------------------------------------- */

/* A fixed height rather than vertical padding: a badge holding a dot, an icon
   or bare text is otherwise three slightly different heights, which shows up
   the moment two of them sit in the same table row. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  height: 24px;
  padding-inline: var(--sp-8);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  vertical-align: middle;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex: none;
}

.badge--no-dot::before {
  display: none;
}

.badge--neutral {
  background-color: var(--n-100);
  color: var(--n-700);
  border-color: var(--n-200);
}
.badge--success {
  background-color: var(--success-50);
  color: var(--success-700);
  border-color: var(--success-100);
}
.badge--warning {
  background-color: var(--warning-50);
  color: var(--warning-700);
  border-color: var(--warning-100);
}
.badge--danger {
  background-color: var(--danger-50);
  color: var(--danger-700);
  border-color: var(--danger-100);
}
.badge--info {
  background-color: var(--info-50);
  color: var(--info-700);
  border-color: var(--info-100);
}
.badge--ai {
  background-color: var(--ai-50);
  color: var(--ai-700);
  border-color: var(--ai-100);
}

/* --------------------------------------------------------------------------
   Avatar
   -------------------------------------------------------------------------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  /* Initials centre on the circle, not on the inherited 1.6 body line box. */
  line-height: 1;
  letter-spacing: 0;
  color: var(--n-0);
  background-color: var(--n-500);
  flex: none;
  -webkit-user-select: none;
  user-select: none;
}

.avatar--sm {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.avatar--lg {
  width: 48px;
  height: 48px;
  font-size: var(--fs-small);
}

.avatar--a {
  background-color: #4b5bd7;
}
.avatar--b {
  background-color: #0e7c7b;
}
.avatar--c {
  background-color: #9c5221;
}
.avatar--d {
  background-color: #7b3fa0;
}
.avatar--e {
  background-color: #2b6cb0;
}
.avatar--f {
  background-color: #4a6350;
}

.avatar-group {
  display: flex;
  align-items: center;
}
.avatar-group .avatar {
  border: 2px solid var(--n-0);
  margin-left: -8px;
}
.avatar-group .avatar:first-child {
  margin-left: 0;
}

/* --------------------------------------------------------------------------
   Tabs — used by Product Modules and Industry Solutions
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--sp-8);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--sp-4);
}
.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  height: 44px;
  padding-inline: var(--sp-16);
  border-radius: var(--r-button);
  border: 1px solid var(--border);
  background-color: var(--n-0);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  flex: none;
  transition: background-color var(--t-hover) var(--ease),
    color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}

.tab:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.tab[aria-selected="true"] {
  background-color: var(--n-900);
  border-color: var(--n-900);
  color: var(--n-0);
}

.tab__icon {
  flex: none;
}

/* Crossfade for tab panels — no layout shift (Part N). */
.tab-panel {
  animation: panel-in var(--t-hover) var(--ease-out) both;
}

@keyframes panel-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Accordion — one item open at a time
   -------------------------------------------------------------------------- */

.accordion-item {
  background-color: var(--n-0);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}

.accordion-item + .accordion-item {
  margin-top: var(--sp-12);
}

.accordion-item:hover {
  border-color: var(--border-strong);
}

.accordion-item.is-open {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-16) var(--sp-24);
  text-align: left;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  border-radius: var(--r-card);
}

.accordion__chevron {
  flex: none;
  color: var(--text-tertiary);
  transition: transform var(--t-hover) var(--ease);
}

.accordion-item.is-open .accordion__chevron {
  transform: rotate(180deg);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-hover) var(--ease);
}

.accordion-item.is-open .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__panel-inner {
  overflow: hidden;
}

.accordion__body {
  padding: 0 var(--sp-24) var(--sp-24);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  max-width: 62ch;
}

.accordion__body p + p {
  margin-top: var(--sp-8);
}

/* --------------------------------------------------------------------------
   Table — 52px header, 64px rows, no vertical borders
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background-color: var(--n-0);
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.table th,
.table td {
  text-align: left;
  padding-inline: var(--sp-24);
  border-bottom: 1px solid var(--border);
}

/* border-collapse drops the borders of a sticky cell once the body scrolls
   under it, so the header would lose its rule exactly when it is needed most.
   Painting the rule as an inset shadow keeps it attached to the cell. */
.table thead th {
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--n-50);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 var(--border);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.table tbody td {
  height: 64px;
  font-size: var(--fs-small);
  color: var(--text-primary);
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr {
  transition: background-color var(--t-micro) var(--ease);
}

.table tbody tr:hover {
  background-color: var(--n-50);
}

/* --------------------------------------------------------------------------
   Input
   -------------------------------------------------------------------------- */

.input {
  width: 100%;
  height: 44px;
  padding-inline: var(--sp-16);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-input);
  background-color: var(--n-0);
  font-size: var(--fs-small);
  color: var(--text-primary);
  transition: border-color var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease);
}

.input::placeholder {
  color: var(--text-disabled);
}

.input:focus {
  outline: none;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.input-search {
  position: relative;
}

.input-search svg {
  position: absolute;
  left: var(--sp-16);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.input-search .input {
  padding-left: 44px;
}

/* --------------------------------------------------------------------------
   Section heading — eyebrow + title + description
   -------------------------------------------------------------------------- */

.section-head {
  max-width: 720px;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-16);
}

.eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background-color: var(--border-strong);
}

.section-head--center .eyebrow::before {
  display: none;
}

.section-head__title + .section-head__desc {
  margin-top: var(--sp-16);
}

.section-head__desc {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.section-head__desc p + p {
  margin-top: var(--sp-8);
}

.section-head__actions {
  margin-top: var(--sp-32);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
}

.section-head--center .section-head__actions {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Trust badge row
   -------------------------------------------------------------------------- */

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-16) var(--sp-32);
}

.trust-list--center {
  justify-content: center;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.trust-item svg {
  color: var(--n-500);
  flex: none;
}

/* --------------------------------------------------------------------------
   Statistic strip
   -------------------------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.stat__value {
  font-size: clamp(32px, 3.4vw, var(--fs-h1));
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: var(--lh-snug);
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   Progress bar — used by the ROI dashboard
   -------------------------------------------------------------------------- */

.progress {
  height: 8px;
  border-radius: var(--r-pill);
  background-color: var(--n-150);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background-color: var(--primary-600);
  width: 0;
  transition: width 250ms var(--ease-out);
}

.progress__fill--success {
  background-color: var(--success-600);
}
.progress__fill--ai {
  background-color: var(--ai-600);
}
.progress__fill--neutral {
  background-color: var(--n-400);
}

/* --------------------------------------------------------------------------
   Company logo strip — grayscale, uniform size
   -------------------------------------------------------------------------- */

.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  height: 32px;
  color: var(--n-500);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  white-space: nowrap;
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity var(--t-hover) var(--ease);
}

.logo-mark:hover {
  opacity: 1;
}

.logo-mark svg {
  flex: none;
  color: var(--n-400);
}