/* ===== SECTION LABEL ===== */
.section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 16px;
  display: inline-block;
}

.section-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--text);
  margin-bottom: 20px;
}

.section-subtitle {
  color: var(--text-secondary);
  font-size: 16px;
  max-width: 600px;
  line-height: 1.7;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.section-header .section-subtitle {
  margin: 0 auto;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: 120px 24px; }

@keyframes cursorBlink {
  0%, 100% { visibility: visible; }
  50% { visibility: hidden; }
}

/* ===== BUTTONS ===== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(rgb(249, 247, 245) 0%, rgb(236, 235, 233) 100%);
  color: #000;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 100px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    rgb(255, 255, 255) 0px 2px 0px 0px inset,
    rgba(255, 255, 255, 0.5) 0px 1px 1px 0px inset,
    rgba(0, 0, 0, 0.5) 0px 0px 1px 0px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
    rgba(0, 0, 0, 0.1) 0px 12px 30px 0px;
  white-space: nowrap;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    rgb(255, 255, 255) 0px 2px 0px 0px inset,
    rgba(255, 255, 255, 0.5) 0px 1px 1px 0px inset,
    rgba(0, 0, 0, 0.5) 0px 0px 1px 0px,
    rgba(0, 0, 0, 0.15) 0px 4px 8px 0px,
    rgba(0, 0, 0, 0.12) 0px 16px 36px 0px;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: white;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 100px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.btn-secondary:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.1);
}

/* Dark button variant for dark sections */
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(270deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  color: white;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 100px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  box-shadow:
    rgba(255,255,255,0.4) 0px 0px 1px 0px inset,
    rgba(255,255,255,0.15) 0px 2px 0px 0px inset,
    rgba(255,255,255,0.15) 0px 1px 2px 0px inset;
  white-space: nowrap;
}

.btn-dark:hover {
  transform: translateY(-1px);
  background: linear-gradient(270deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
}

/* Light section button */
.btn-light-section {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--text);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 100px;
  padding: 14px 28px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  white-space: nowrap;
}

.btn-light-section:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* ===== CARDS ===== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== UTILITY CLASSES ===== */
/* Used to eliminate inline style="" attributes for CSP style-src compliance. */
.u-hidden { display: none; }
.u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.u-relative { position: relative; }
.u-cursor-pointer { cursor: pointer; }
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-1 { flex: 1; }
.u-gap-sm { gap: 6px; }
.u-gap-md { gap: 12px; }
.u-text-center { text-align: center; }
.u-mr-6 { margin-right: 6px; }
.u-mt-12 { margin-top: 12px; }
.u-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===== FOCUS-VISIBLE ===== */
/* Keyboard-only focus ring — visible for Tab navigation, hidden for mouse clicks. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Dark sections override */
.hero :focus-visible,
.portal-body :focus-visible,
.admin-sidebar :focus-visible,
.error-body :focus-visible {
  outline-color: rgba(255, 255, 255, 0.6);
}