.hero {
  text-align: center;
  padding: 60px 20px 30px;
  color: var(--text-color);
}

.scientific-calculator {
  display: flex;
  justify-content: center;
  padding: 40px 15px 80px;
}

.calc-container {
  background: linear-gradient(145deg, #222831, #393e46);
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  padding: 25px;
  width: 360px;
  color: #fff;
}

.calc-display {
  background: #1a1f25;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  text-align: right;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
}

.secondary-display {
  font-size: 0.9rem;
  color: #aaa;
  min-height: 22px;
}

#display {
  width: 100%;
  font-size: 1.8rem;
  border: none;
  background: transparent;
  color: #fff;
  text-align: right;
  outline: none;
}

.button-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.btn {
  padding: 14px 0;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.15s ease-in-out;
}

.btn.num {
  background: #00adb5;
  color: #fff;
}

.btn.op {
  background: #007bff;
  color: #fff;
}

.btn.function {
  background: #3a4750;
  color: #ffde59;
}

.btn.memory {
  background: #31363f;
  color: #00fff5;
}

.btn.action {
  background: #f05a5a;
}

.btn.equal {
  background: #06d6a0;
  grid-column: span 2;
  font-size: 1.3rem;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}