@import url("../index/styles.css");

.about-hero { overflow: hidden; padding: 105px 0 99px; border-bottom: 1px solid var(--line); }
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(310px, .96fr); align-items: center; gap: 70px; }
.about-hero h1 { margin: 20px 0 24px; font-size: clamp(3rem, 6vw, 5.7rem); line-height: .97; }
.about-hero h1 em { color: var(--accent); font-style: normal; }
.about-hero .hero-description { max-width: 520px; color: var(--text-soft); font-size: .96rem; line-height: 1.9; }
.team-orbit { position: relative; min-height: 365px; }
.orbit-line { position: absolute; top: 50%; left: 50%; border: 1px solid var(--line-strong); border-radius: 50%; transform: translate(-50%, -50%) rotate(-24deg); }
.orbit-line-one { width: 340px; height: 195px; }
.orbit-line-two { width: 240px; height: 330px; border-style: dashed; border-color: var(--accent); opacity: .6; transform: translate(-50%, -50%) rotate(31deg); }
.orbit-center { position: absolute; top: 50%; left: 50%; display: grid; width: 138px; height: 138px; place-content: center; border: 1px solid var(--accent); border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 8%, transparent); text-align: center; transform: translate(-50%, -50%); }
.orbit-center small { color: var(--text-faint); font-family: ui-monospace, monospace; font-size: .5rem; letter-spacing: .12em; }
.orbit-center strong { margin: 5px 0; color: var(--accent-strong); font-size: 2.8rem; letter-spacing: -.08em; line-height: 1; }
.orbit-person { position: absolute; display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid var(--accent); border-radius: 50%; background: var(--surface-tint); color: var(--accent-strong); font-family: ui-monospace, monospace; font-size: .6rem; box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 8%, transparent); }
.person-one { top: 17%; left: 12%; }
.person-two { right: 10%; bottom: 15%; border-color: var(--text-soft); color: var(--text-soft); }
.team-section { padding: 97px 0 116px; }
.team-section .section-heading { align-items: end; margin-bottom: 43px; }
.team-section h2 { margin-top: 15px; font-size: clamp(2.3rem, 4vw, 3.7rem); }
.section-intro { max-width: 420px; color: var(--text-soft); font-size: .88rem; line-height: 1.9; }
.member-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.member-card { position: relative; min-height: 380px; padding: 27px 29px 23px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.member-card::after { position: absolute; right: -70px; bottom: -90px; width: 230px; height: 230px; border: 1px solid var(--line); border-radius: 50%; content: ''; }
.member-card:hover { border-color: var(--accent); background: var(--surface-tint); }
.member-card.member-two { background: var(--surface-soft); }
.member-card-head { display: flex; align-items: center; justify-content: space-between; }
.member-number { color: var(--accent); font-family: ui-monospace, monospace; font-size: .6rem; }
.member-state { color: var(--text-faint); font-family: ui-monospace, monospace; font-size: .53rem; letter-spacing: .09em; }
.member-avatar { display: grid; width: 88px; height: 88px; margin: 37px 0 25px; place-items: center; border: 1px solid var(--accent); border-radius: 50%; background: var(--surface-tint); color: var(--accent-strong); font-family: ui-monospace, monospace; font-size: .62rem; box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 7%, transparent); }
.member-two .member-avatar { border-color: var(--text-soft); color: var(--text-soft); box-shadow: 0 0 0 10px color-mix(in srgb, var(--text-soft) 7%, transparent); }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.member-card h3 { margin-bottom: 4px; font-size: 1.75rem; letter-spacing: -.05em; }
.member-role { color: var(--accent-strong); font-family: ui-monospace, monospace; font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.member-bio { max-width: 430px; margin-top: 17px; color: var(--text-soft); font-size: .8rem; line-height: 1.8; }
.member-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.member-skill { padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; color: var(--text-faint); font-family: ui-monospace, monospace; font-size: .53rem; }
.working-section { padding: 98px 0 112px; border-top: 1px solid var(--line); background: var(--surface-soft); }
.working-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 100px; }
.working-grid h2, .values-layout h2 { margin: 16px 0 21px; font-size: clamp(2.15rem, 4vw, 3.5rem); }
.working-grid h2 em, .values-layout h2 em { color: var(--accent); font-style: normal; }
.working-intro { max-width: 370px; color: var(--text-soft); font-size: .86rem; line-height: 1.85; }
.working-list { border-top: 1px solid var(--line-strong); }
.working-list article { display: grid; grid-template-columns: 47px 1fr; gap: 15px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.working-list article > span { color: var(--accent); font-family: ui-monospace, monospace; font-size: .57rem; }
.working-list h3 { margin-bottom: 7px; font-size: .95rem; }
.working-list p { max-width: 500px; color: var(--text-soft); font-size: .75rem; line-height: 1.75; }
.team-values { padding: 100px 0 116px; }
.values-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 100px; align-items: center; }
.value-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.value-tags span { padding: 13px 17px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--text-soft); font-family: ui-monospace, monospace; font-size: .62rem; letter-spacing: .05em; }
.value-tags span:nth-child(odd) { border-color: var(--accent-soft); color: var(--accent-strong); }

@media (max-width: 800px) {
  .about-hero { padding: 72px 0 63px; }
  .about-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .team-orbit { min-height: 270px; }
  .orbit-line-one { width: 260px; height: 150px; }
  .orbit-line-two { width: 190px; height: 260px; }
  .orbit-center { width: 110px; height: 110px; }
  .orbit-center strong { font-size: 2.2rem; }
  .team-section { padding: 70px 0 80px; }
  .team-section .section-heading { align-items: start; flex-direction: column; gap: 23px; }
  .member-grid { grid-template-columns: 1fr; }
  .working-grid, .values-layout { grid-template-columns: 1fr; gap: 45px; }
  .working-section, .team-values { padding: 74px 0 83px; }
}
@media (max-width: 580px) {
  .about-hero h1 { font-size: 3.1rem; }
  .member-card { min-height: 345px; padding: 22px 21px 19px; }
  .member-avatar { margin-top: 31px; }
}