/*===============================
  Home Page Visual Refinements
  Scoped to the public homepage sections only. These rules layer on top of
  the base theme (style.css) without modifying shared/admin styles.
  ===============================*/

/* Hero: constrain intro copy width for readability and add breathing room */
.tmp-banner-one-area .banner-one-main-wrapper .inner .disc {
  max-width: 720px;
}
.tmp-banner-one-area .banner-one-main-wrapper .inner .title {
  max-width: 920px;
}
.tmp-banner-one-area .banner-one-main-wrapper .inner .sub-title {
  display: inline-block;
  letter-spacing: 0.08em;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  margin-bottom: 18px;
}

/* Impact metrics: elevate the flat list into distinct cards */
.impact-area .my-skill-card {
  background: var(--color-gray-2);
  border-radius: 16px;
  padding: 32px 28px;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.impact-area .my-skill-card:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.impact-area .my-skill-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary, #ff254b);
}
.impact-area .my-skill-card .counter-title {
  font-size: 40px;
  line-height: 1.2;
  background: linear-gradient(90deg, var(--color-primary, #ff254b), #ff7a8a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.impact-area .my-skill-card .skill-title {
  margin-top: 8px;
  margin-bottom: 10px;
}
.impact-area .row {
  row-gap: 24px;
}