/* Layer: components */
.section {
  padding: 50px 0;
}

.section-kicker,
.panel-label,
.card-meta,
.feature-card-meta {
  color: rgba(173, 178, 182, 0.82);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.section-head h2,
.section-title h2 {
  font-size: clamp(2rem, 3vw, 3.4rem);
}

.section-intro {
  max-width: 66ch;
  color: var(--text-muted);
}

.card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 100%),
    linear-gradient(180deg, rgba(17, 19, 24, 0.36), rgba(18, 19, 24, 0.96));
  box-shadow: none;
}

.card-light {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
    linear-gradient(180deg, rgba(42, 42, 48, 0.98), rgba(18, 19, 24, 0.98));
}

.badge,
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(173, 178, 182, 0.18);
  color: #e3e6ea;
  background: rgba(255, 255, 255, 0.04);
}

.badge-soft {
  color: #e1d1a5;
  background: rgba(200, 184, 141, 0.22);
  border-color: rgba(173, 178, 182, 0.16);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  min-height: 50px;
  padding: 0 18px;
  border-radius: 15px;
  border: 1px solid transparent;
  font-family: "Oxanium", "Montserrat", sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.button-primary {
  color: #f4f1e9;
  background: linear-gradient(135deg, #e1d1a5 0%, #c8b88d 50%, #111318 100%);
  box-shadow: 0 14px 30px rgba(200, 184, 141, 0.28);
}

.button-primary:hover {
  box-shadow: 0 18px 34px rgba(200, 184, 141, 0.34);
}

.button-secondary,
.button-ghost {
  color: #eceef1;
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(173, 178, 182, 0.22);
}

.button-ghost {
  background: transparent;
}

input,
select,
textarea {
  min-height: 50px;
  padding: 14px 16px;
  border: 1px solid rgba(173, 178, 182, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
}

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(173, 178, 182, 0.85) 50%),
    linear-gradient(135deg, rgba(173, 178, 182, 0.85) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select option {
  color: #111317;
}

input::placeholder,
textarea::placeholder {
  color: rgba(173, 178, 182, 0.72);
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  accent-color: #e1d1a5;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(228, 210, 148, 0.9);
  outline-offset: 2px;
}