/* =========================================
 *    5. CONTAINERS
 * ========================================= */

.surface {
  background-color: var(--color-surface);
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

.section {
  background: linear-gradient(
    180deg,
    var(--color-surface-low) 0%,
    var(--color-surface) 100%
  );

  padding-left: var(--space-section-side);
  padding-right: var(--space-section-side);
  padding-top: var(--space-section-top);
  padding-bottom: var(--space-section-lg); 
}


.surface-high-gradient {
  background: linear-gradient(
    var(--gradient-rotation), 
    var(--color-accent-light), 
    var(--color-primary)
    );
}

.surface-glass-card {
  padding: var(--space-6);

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(252, 248, 244, 0.78) 100%
  );

  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);

  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--radius-lg);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);

  overflow: hidden;
}


/* =========================================
 *    7. BUTTONS
 * ========================================= */

.btn {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
}

.btn-cta {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-size: var(--text-lg);
  font-weight: bold;
    background: linear-gradient(
    -135deg,
    var(--color-primary),
    var(--color-accent-light)
  );
  cursor: pointer;
}

.btn-cta:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  filter: brightness(1.05);
}

.btn-outline {
  display: inline-block;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-lg);
  font-size: var(--text-lg);
  font-weight: 500;
  background-color: var(--color-surface-high);
  color: var(--color-text);
  cursor: pointer;
}

.btn-outline:hover {
  background-color: var(--color-surface-low);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-text);
}

.btn-primary:hover {
  background: var(--color-primary);
  color: var(--color-text);
	text-decoration: bold;
}