:root {
  --bg-talent: #f6f2ed;
  --bg-companies: #eef9f7;
  --accent-talent: #c47a2c;
  --accent-companies: #0fb9a8;
  --text-main: #1d1d1f;
}

* {
  box-sizing: border-box;
}



.taas-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 90vh;
}

.panel {
  padding: 5rem 4rem;
  position: relative;
  overflow: hidden;
}

.panel h2 {
  font-size: 2.6rem;
  line-height: 1.15;
  margin: 1rem 0;
}

.panel p {
  max-width: 420px;
  font-size: 1.05rem;
  line-height: 1.6;
}

.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.actions {
  display: flex;
  gap: 1rem;
}

.btn {
  padding: 0.75rem 1.4rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.btn.primary {
  background: #111;
  color: #fff;
}

.btn.ghost {
  border: 1px solid #111;
  color: #111;
}

.talent {
  background: var(--bg-talent);
}

.talent .eyebrow {
  color: var(--accent-talent);
}

.companies {
  background: var(--bg-companies);
}

.companies .eyebrow {
  color: var(--accent-companies);
}

.visual {
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 260px;
  height: 260px;
}

.shape {
  position: absolute;
  border-radius: 18px;
  opacity: 0.9;
}

.shape-a {
  width: 180px;
  height: 60px;
  background: #e2b98a;
  top: 40px;
  left: 20px;
}

.shape-b {
  width: 220px;
  height: 80px;
  background: #d39a55;
  top: 120px;
  left: 60px;
}

.shape-c {
  width: 200px;
  height: 70px;
  background: #39d5c3;
  top: 50px;
  left: 10px;
}

.shape-d {
  width: 240px;
  height: 90px;
  background: #0fb9a8;
  top: 130px;
  left: 50px;
}

@media (max-width: 900px) {
  .taas-split {
    grid-template-columns: 1fr;
  }

  .panel {
    padding: 3rem 2rem;
  }
}