/* Homepage identity and commission card. */
.hero {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 326px);
  column-gap: clamp(40px, 7vw, 88px);
  row-gap: 60px;
  padding-block: 68px 44px;
}
.hero .intro { width: 100%; max-width: 540px; padding-bottom: 12px; }
.hero #intro-title { font-size: clamp(88px, 10vw, 118px); margin: 0 0 20px; line-height: 1.08; }
.hero .developer-role { font-size: clamp(25px, 2.8vw, 34px); line-height: 1.25; letter-spacing: -.05em; margin: 0 0 17px; }
.hero .secondary-roles { gap: 8px; }
.role-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #252525; border-radius: 8px; background: #090909; color: #bcbcbc; font-size: 12px; line-height: 1.3; }
.role-chip svg, .quality-line > svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hero .quality-line { align-items: center; gap: 8px; margin-top: 26px; padding: 0; border: 0; font-size: 13px; line-height: 1.6; }
.quality-line > svg { margin-right: 2px; color: #777; }
.hero .quality-line strong { font-weight: 700; }
.hero .quality-line > span { color: #919191; }
.hero .hero-actions { gap: 12px; margin-top: 32px; }
.hero-actions .commission-contact, .hero-actions .projects-link {
  gap: 18px;
  min-height: 48px;
  padding-inline: 19px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.hero-actions .commission-contact { border: 1px solid #fff; background: #f5f5f5; color: #080808; }
.hero-actions .commission-contact:hover { background: #dedede; transform: translateY(-2px); }
.hero-actions .projects-link { border: 1px solid #2c2c2c; background: #0b0b0b; color: #ddd; }
.hero-actions .projects-link:hover { border-color: #666; background: #141414; transform: translateY(-2px); }
.hero-actions .commission-contact:active, .hero-actions .projects-link:active { transform: scale(.97); }
.hero .portrait { padding: 18px; border: 1px solid #282828; border-radius: 26px; background: #090909; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.hero .portrait::before { content: none; }
.hero .profile-commissions { gap: 13px; margin-bottom: 16px; }
.hero .profile-commissions .availability { padding: 7px 10px; border-color: #333; background: transparent; font-size: 8px; letter-spacing: .07em; }
.hero .availability > span { width: 5px; height: 5px; box-shadow: 0 0 0 3px #222; }
.hero .profile-commissions > strong { font-size: 14px; letter-spacing: -.02em; }
.hero .profile-commissions .server-price-options { display: grid; align-items: center; grid-template-columns: 1fr auto 1fr; width: 100%; gap: 10px; }
.hero .server-price-options a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 63px; padding: 10px; border: 1px solid #272727; border-radius: 12px; background: #111; }
.hero .server-price-options a:hover { border-color: #666; background: #1a1a1a; }
.hero .server-price-options b { font-size: 21px; line-height: 1.1; font-weight: 700; letter-spacing: -.04em; }
.hero .server-price-options .plan-label { color: #a3a3a3; font-size: 10px; line-height: 1.3; font-weight: 500; }
.hero .plan-separator { font-size: 10px; color: #777; }
.hero .portrait .discord-avatar { border-radius: 17px; border-color: #303030; box-shadow: none; }
.hero .portrait:hover .discord-avatar { transform: none; box-shadow: none; }
.hero .discord-status { bottom: 10px; right: 10px; font-size: 8px; padding: 7px 9px; border: 1px solid #3a3a3a; background: rgba(5,5,5,.92); }
.hero .portrait figcaption { margin-top: 13px; }
.hero .portrait figcaption .projects-link { width: 100%; justify-content: space-between; min-height: 32px; padding: 4px 2px; background: transparent; border: 0; border-radius: 0; color: #b3b3b3; font-size: 11px; }
.hero .portrait figcaption .projects-link:hover { color: #fff; }
.hero .portrait figcaption .projects-link > span { padding: 5px 8px; border: 1px solid #303030; border-radius: 8px; background: #111; }
@media (max-width: 900px) and (min-width: 701px) {
  .hero { column-gap: 32px; grid-template-columns: minmax(0,1fr) 280px; }
  .hero .developer-role { font-size: 25px; }
  .hero .hero-actions { gap: 9px; }
  .hero-actions .commission-contact, .hero-actions .projects-link { padding-inline: 13px; gap: 12px; }
}
@media (max-width: 700px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 38px; padding-block: 40px 30px; }
  .hero .intro { order: 1; padding: 0; }
  .hero .portrait { order: 2; width: min(100%, 340px); align-self: center; }
  .hero .tech-stack { order: 3; }
  .hero #intro-title { margin-bottom: 18px; font-size: 92px; }
  .hero .quality-line { margin-top: 22px; gap: 7px; font-size: 12px; }
  .hero .hero-actions { margin-top: 26px; }
}
@media (max-width: 380px) {
  .role-chip { padding-inline: 8px; font-size: 11px; }
  .hero-actions .commission-contact, .hero-actions .projects-link { padding-inline: 13px; gap: 9px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-actions .commission-contact:hover, .hero-actions .projects-link:hover,
  .hero-actions .commission-contact:active, .hero-actions .projects-link:active { transform: none; }
}