/*
 * Components — .btn variants, trust/stats rows, info panel, badge.
 * Shared primitives used across multiple sections.
 * Depends on: variables.css
 *
 * @package Vinelec
 */

/* =================================================================
   BUTTON BASE
   ================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 15px var(--space-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--ease),
    background var(--ease),
    border-color var(--ease);
}

.btn svg {
  width: 18px;
  height: 18px;
}

/* =================================================================
   PRIMARY BUTTON
   ================================================================= */

.btn-primary {
  background: var(--clr-primary);
  color: var(--clr-white);
  box-shadow: var(--shadow-primary-lg);
}

.btn-primary:hover {
  background: var(--clr-primary-hover);
  transform: translateY(-2px);
}

/* =================================================================
   GHOST BUTTON
   ================================================================= */

.btn-ghost {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--clr-border);
  color: var(--clr-white);
}

.btn-ghost:hover {
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}

.btn-ghost .play {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-ghost .play svg {
  width: 10px;
  height: 10px;
}

/* =================================================================
   TRUST ROW (hero — small stat pills)
   ================================================================= */

.trust {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

.trust-item {
  display: flex;
  flex-direction: column;
}

.trust-item .label {
  font-size: var(--fs-sm);
  color: var(--clr-muted);
  margin-top: 4px;
}

/* =================================================================
   STATS ROW (hero bottom — 6-item grid)
   ================================================================= */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: var(--space-lg);
  border-top: 1px solid rgb(74 73 81 / 50%);
  margin-top: var(--space-lg);
  background: #050E1A !important;
}

.stat {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgb(74 73 81 / 50%);
}

.stat:last-child {
  border-right: none;
}

.stat .num{
	color: #3491F5;
}